<template>
  <view class="container" v-if="isShow">
    <!--    转盘-->
    <view class="box-1" v-if="box1">
<!--      gif-->
      <view class="gif">
        <image mode="aspectFit" :src="imageUrl+'/dacu/Rc8Tgu8SFekXcigpuGxzkU.gif'"></image>
      </view>
      <view class="box-1-message"></view>
      <view class="box-1-zhuanpan">
        <view class="box-1-deng">
          <view class="deng">
            <image style="width: 100%;height: 100%;" :src="imageUrl+'/dacu/dengpao2.png'"></image>
          </view>
          <view class="box-list" :style="boxListStyle">
            <view class="box-list-item" :style="'transform: rotate('+(360/8*index)+'deg)'" v-for="(item,index) in list">
              <view class="num">{{ item.num }}</view>
              <view class="title">积分</view>
            </view>
          </view>
          <view class="box-zhizhen" @click="onsubmit()"></view>
        </view>
      </view>
      <view class="box-1-close" @click="isShow = false"></view>
    </view>
    <!--    获得积分弹框-->
    <view class="box-2" :style="!box1?box2Style:''">
      <view class="box-1-close" @click="isShow = false"></view>
      <view class="pop">
        <view class="integral">
          <text>{{ integral }}</text>
          <view class="integral-msg">积分</view>
        </view>
        <view class="msg">只有观看完整视频才能获得积分奖励，谢谢您的配合</view>
        <view class="button" @click="toVideoList()"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'dacu-7',
  data() {
    return {
      imageUrl: 'https://wechat-pictures-1301970825.file.myqcloud.com/wxapp',
      list: [
        {num: '100'},
        {num: '2'},
        {num: '20'},
        {num: '6'},
        {num: '88'},
        {num: '10'},
        {num: '66'},
        {num: '8'},
      ],
      box1: true,
      boxListStyle: "",
      box2Style: 'width: 750rpx;height: 992rpx;transform: scale(1);',
      isShow: false,
      productType: this.$productType,
      integral: '',
      isSubmit:true,
      danAudio:{}
    };
  },
  methods: {
    async init() {
      this.initMp3()
      let url = '/tag/bigSales/getQuestionPush'
      const res = await this.$javaApiTag.doRequest("get", url, {}, 'json');
      if (res.data.data != null && res.data.data.isReward === 0) {
        this.isShow = true
        //暂停视频
        this.$emit('videoSet',true);
      }
    },
    async onsubmit() {
      if(!this.isSubmit){
        return
      }
      this.isSubmit=false
      let url = '/tag/bigSales/bigSalesLottery?productType=' + this.productType
      const indexArray = {2: 7, 6: 5, 8: 1, 10: 3, 20: 6, 88: 4, 66: 2, 100: 0};
      const res = await this.$javaApiTag.doRequest("post", url, {}, 'json')
      if (res.data.data < 0 || res.data.data===null) {
        uni.showToast({title: res.data.message, icon: 'none'})
        return
      }
      // let res={data:{data:100}};
      this.danMp3()
      this.integral = res.data.data
      let array = []
      for (let i = 0; i < 8; i++) {
        array.push((360 / 8) * i + (Math.floor(Math.random() * 20) + 1))
      }
      let deg = -3600 + array[indexArray[res.data.data]]
      this.boxListStyle = `transform: rotate(${deg}deg);`
      setTimeout(() => {
        this.successMp3()
        this.box1 = false
        this.isSubmit=true

      }, 6 * 1000)
    },
    //点抽奖音频
    danMp3()
    {
      this.danAudio.src=this.imageUrl+'/dacu/mp3/1.MP3'
      this.danAudio.playbackRate=1.25
      this.danAudio.onPlay(() => {
        console.log('开始抽奖');
        setTimeout(()=>{
          this.danAudio.playbackRate=0.5
        },4000)
      });
    },
    //抽中奖励
    successMp3()
    {
      this.danAudio.playbackRate=1
      this.danAudio.src=this.imageUrl+'/dacu/mp3/2.MP3'
      this.danAudio.onPlay(() => {
        console.log('抽中奖励的音频');
      });
    },
    //音频初始化
    initMp3()
    {
      this.danAudio=uni.createInnerAudioContext()
      this.danAudio.autoplay=true;
      this.danAudio.startTime=0;
    },
    toVideoList() {
      this.isShow = false
      uni.navigateTo({url: "/large/videoList/videoList?integral=" + this.integral})
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  position: fixed;
  display: flex;
  align-content: center;
  justify-content: center;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .9);
  z-index: 100000;
}

.box-1 {
  width: 668upx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.gif{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0%,-50%);
  z-index: 20;
  animation: gif 2s forwards;
}
@keyframes gif {
  100%{
    z-index: -1;
  }
}
.gif image{
  width: 100%;
  height: 100%;
}

.box-1-message {
  width: 631upx;
  height: 379upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/img_title@2x.png");
  background-size: 100% 100%;
  margin-bottom: 26upx;
}

.box-1-zhuanpan {
  width: 100%;
  height: 688upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/bg_img_zhuanpan@2x.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 24upx;
}

.box-1-deng {
  width: 100%;
  height: 100%;
  position: relative;
}

.box-1-deng .deng {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: deng .7S steps(2) infinite;
  z-index: 1;
}

@keyframes deng {
  0% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.box-list {
  width: 540upx;
  height: 540upx;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: ceil(-540upx/2);
  margin-left: ceil(-540upx/2);
  border-radius: 50%;
  background-color: #fff;
  transition: all 6s ease;
}

.box-list-item {
  font-size: 54upx;
  color: #FF2727;
  font-weight: 600;
  position: absolute;
  width: ceil((2 * 3.14 * (540upx/2)) / 8);
  height: ceil(534upx/2);
  top: 0;
  left: 30%;
  transform-origin: 50% 100%;
  box-sizing: border-box;
  padding-top: 21upx;
}

.box-list-item:nth-child(2n+1) {
  /* 样式规则 */
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/ba.png");
  background-size: 100% 95%;
}

.num, .title {
  width: 100%;
  text-align: center;
}

.title {
  font-size: 40upx;
  font-weight: 400;
  margin-top: 10upx;
}

.box-zhizhen {
  width: 220upx;
  height: 220upx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/icon_choujiang@2x.png");
  background-size: 100% 100%;
  z-index: 10;
}

.box-1-close {
  width: 67upx;
  height: 67upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/home_icon_cloes@2x.png");
  background-size: 100% 100%;
  margin-top: 70upx;
}

.box-2 {
  width: 0rpx;
  height: 0rpx;
  margin: auto 0;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/bg_guanmangshanshuo.png");
  background-size: 100% 100%;
  animation: shan .7S steps(2) infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .3s ease;
  overflow: hidden;
  transform: scale(0); /* 缩放为原始尺寸的 0% */
}

@keyframes shan {
  0% {
    background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/bg_guanmangshanshuo.png");
  }
  100% {
    background-image: none;
  }
}

.pop {
  width: 512upx;
  height: 642upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/bg_chouzhongjifen@2x.png");
  background-size: 100% 100%;
  position: relative;
}

.integral {
  width: 100%;
  position: absolute;
  top: 180upx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 160upx;
  color: #F16F13;
  font-weight: 600;
}

.integral-msg {
  width: 42upx;
  height: 95upx;
  background-color: #6E7FF7;
  border-radius: 7upx;
  color: #fff;
  font-size: 34upx;
  text-align: center;
  margin-left: 10upx;
}

.msg {
  width: 420upx;
  border-radius: 8upx;
  box-sizing: border-box;
  border: 1upx solid #D8290B;
  background-color: #FFC089;
  font-size: 34upx;
  color: #D8290B;
  font-weight: 500;
  position: absolute;
  top: 359upx;
  left: 50%;
  transform: translate(-50%, 0%);
  padding: 8upx 6upx;
  text-align: center;
}

.button {
  width: 414upx;
  height: 130upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/tab_lingqu@2x.png");
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0%);
}

.box-2 .box-1-close {
  position: absolute;
  top: 34upx;
  right: 60upx;
}

</style>
